<template>
  <div class="topbar">
    <header-logo></header-logo>
    <div class="header-menu">
      <div
        class="h-menu-item"
        v-for="(item, index) of h_menu_item"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>
    <search-bar></search-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      h_menu_item: [
        { name: '小米手机' },
        { name: 'RedMi手机' },
        { name: '电视' },
      ],
    }
  },
}
</script>

<style lang="scss">
.topbar {
  position: relative;

  .header-logo {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .header-menu {
    width: 643px;
    padding-left: 264px;
    display: flex;
    .h-menu-item {
      flex: none;
      font-size: 16px;
      font-weight: 700;
      line-height: 112px;
      margin-right: 20px;
      &:hover {
        color: #ff6600;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
    }
  }
}
</style>